<style>
    .select-wrapper {
        width: 800px;
        margin: 200px auto;
    }
    
    .select-wrapper form {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    
    .select-wrapper label {
        width: 32%;
        border: 1px solid #cccc;
        border-radius: 8px;
    }
    
    .select-wrapper select {
        width: 68%;
        height: 45px;
        font-size: 25px;
        line-height: 45px;
        border: 0;
        outline: none;
    }
</style>

<div class="select-wrapper">
    <form action="">
        <label for="shi">
                <select name="" id="province" name="shi">
                    <option value="">请选择</option>
                </select>
                省/直辖市
                </label>
        <label for="">
                <select name="" id="city">
                     <option value="">请选择</option>
                </select>
               市/地区
                </label>
        <label for="">
                <select name="" id="town">
                     <option value="">请选择</option>
                </select>
                区/县
                </label>
    </form>
</div>


<script>
    function SelectObj(url, key) {
        this.baseUrl = url;
        this.key = key
    }
    SelectObj.prototype = {
        constructor: SelectObj,
        init() {
            this.getData('province');
            this.initEvent();
        },
        initEvent() {
            $('#province').on('change', this.onProvinceChange.bind(this))
            $('#city').on('change', this.onCityChange.bind(this))
        },
        onProvinceChange(e) {
            $('#city').add($('#town')).html('<option value="-1">请选择</option>')
            if (e.target.value < 0) return;
            let val = $(e.target).val()
            this.getData('city', {
                parentid: val
            })
        },
        onCityChange(e) {
            $('#town').html('<option value="-1">请选择</option>')
            if (e.target.value < 0) return;
            let val = $(e.target).val()
            this.getData('town', {
                parentid: val
            })
        },
        getData(area, data = null) {
            console.log(area);
            $.ajax({
                type: "get",
                context: this,
                url: `${this.baseUrl}/${area}?${this.key}&callback=?`,
                data: data,
                dataType: "jsonp",
                success: function(response) {
                    !response.status && this.renderSelect(response.result, area)
                }
            });
        },
        renderSelect(data, area) {
            let str = '<option value="-1">请选择</option>' + data.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
            $(`#${area}`).html(str)
        }
    }
    let s = new SelectObj('https://api.jisuapi.com/area', 'appkey=8f8d5def36b97a6f');
    s.init();
</script>